<template>
  <div class="pages receiptEdit">
    <div class="operationBox tableSearch">
      <el-button type="primary" @click="goBack()" size="mini">返回</el-button>
      <!-- <el-button type="primary" @click="dialogFormVisible = true" size="mini">去支付</el-button> -->
    </div>
    <el-form :model="formdata" ref="formdata" label-width="120px" size="mini" class="box-content">
      <el-row>
        <el-col :span="8">
          <el-form-item label="供应商 :" prop="supplierName" v-if="paymentStatusArray=='退货收款'">
            <span>{{formdata.supplierName}}</span>
          </el-form-item>
          <el-form-item label="企业名称 :" prop="supplierName" v-if="paymentStatusArray=='销售收款'">
            <span>{{formdata.shopName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单号 :">
            <span>{{formdata.saleCode}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单据日期 :" prop="receiveDate">
            <span>{{formdata.orderDate}}</span>
            <!-- <el-date-picker v-if="showTab === 2" v-model="formdata.receiveDate" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择交货日期"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款类型 :">
            <span>{{paymentStatusArray}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" v-if="type!='2'">
          <el-form-item label="订单状态 :">
            <span>{{saleStatusArray}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="type=='2'">
        <el-col :span="8">
          <el-form-item label="已收金额 :" prop="receiveDate">
            <span>{{paidPrices}} 元</span>
            <!-- <el-date-picker v-if="showTab === 2" v-model="formdata.receiveDate" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择交货日期"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="剩余金额 :">
            <span>{{remainingPrices}} 元</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="type=='2'">
        <el-col :span="8">
          <el-form-item label="赊销日期 :" prop="receiveDate">
            <span>{{creditTimes}}</span>
            <!-- <el-date-picker v-if="showTab === 2" v-model="formdata.receiveDate" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择交货日期"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="赊销金额 :">
            <span>{{creditPrices}}</span><span v-if="creditPrices!=undefined">元</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 订单信息 -->
    <div class="from_main infon">
      <div class="infon_text">
        <span class="infon_shu"></span>
        <span class="infon_text_t">订单信息</span>
      </div>
    </div>
    <cope-with :formdata="formdata" :confirmtype="confirmtype" :tableData="tableData" :isConfirm="isConfirm" :hasConfirmCai="hasConfirmCai" style="margin-top:20px;"></cope-with>

    <div class="from_main infon" v-if="type=='2'||type=='3'">
      <div class="infon_text">
        <span class="infon_shu"></span>
        <span class="infon_text_t">收款信息</span>
      </div>
      <el-table :data="payList" border style="width:80%;">
        <el-table-column prop="payTime" label="收款时间" align="center" :formatter="trunTime">
        </el-table-column>
        <el-table-column prop="price" label="收款金额" align="center">
        </el-table-column>
        <el-table-column prop="creditTime" label="赊销日期" align="center" :formatter="trunTime">
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" align="center" :formatter="payTypes">
        </el-table-column>
        <el-table-column prop="remainderPrice" label="剩余金额" align="center">
        </el-table-column>
      </el-table>
    </div>

    <el-dialog class="addshopname" title="付款" :visible.sync="dialogFormVisible" width="610px">
      <el-form :model="form" center>
        <el-form-item label="交易类型：" :label-width="formLabelWidth">
          <el-select class="selecttype" size="small" v-model="form.tradeType" placeholder="付款方式">
            <el-option label="线下支付" value="1"></el-option>
            <el-option label="在线支付" value="2"></el-option>
            <el-option label="预付款支付" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款时间：" :label-width="formLabelWidth" prop="deliveryDate" v-if="form.tradeType=='1'">
          <el-date-picker v-model="form.deliveryDate" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择交货日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="付款金额：" :label-width="formLabelWidth" prop="deliveryDate" v-if="form.tradeType=='1'">
          <sd-input :val.sync='form.money' placeholder="请输入充值金额" style="width:120px;float:left; "></sd-input>
        </el-form-item>
        <el-form-item label="预付款余额：" :label-width="formLabelWidth" v-if="form.tradeType=='3'">
          <span>{{gold}} 元</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" center>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="rechargeSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import SdInput from "@/components/SdInput";
import pageUnit from "components/Page";
import CopeWith from "@/components/CopeWith";
import u from "@/util";
import s from "@/util/state";
import {
  orderDetails,
  selectGoodsSaleDetails,
  selectOrderGoodsPurchaseReturnDetail
} from "@/api";
export default {
  components: { SdInput, pageUnit, CopeWith },
  data() {
    return {
      paidPrices: "",
      remainingPrices: "",
      creditTimes: "",
      creditPrices: "",
      payTypes: s.payTypes,
      orderId: "",
      paymentStatusArray: "", // 收付款状态数组
      saleStatusArray: "", // 订单状态数组
      type: "",
      payList: [],
      form: {
        operPrice: "",
        deliveryDate: "",
        tradeType: "1"
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      formdata: {
        purchaseCode: "",
        deliveryDate: "", // 交货日期
        purchaseStatus: "", // 订单状态
        orderDate: "", // 单据日期
        receivedStatus: "", // 发货状态
        payStatus: "", // 收款状态
        shopName: "", //商户名称
        shopId: "", // 客户id
        goodsList: [], // 物料
        creator: "", // 操作人
        remark: "", // 备注
        // purchaseAmount: 0, // 总计
        freight: 0, // 运费
        taxAmount: 0, // 税
        amount: 0, // 实收总计
        confirmSaleAmount: 0,
        confirmFreight: 0,
        confirmTax: 0,
        confirmAmount: 0,
        saleType: ""
      },
      tableData: [],
      isConfirm: true, // 是否进行过报货确认
      confirmtype: false,
      hasConfirmCai: false, // 是否是采购报货
      inStatus: ["已生成", "", "已退货"]
    };
  },
  computed: mapState([
    "sub",
    "merchantId",
    "power",
    "path",
    "linkName",
    "mobile",
    "userId"
  ]),
  created() {
    this.id = u.getQuery().id; // 查看id
    this.type = u.getQuery().type;
  },
  mounted() {
    this.getDataById();
  },
  methods: {
    trunTime(row, column, cellValue) {
      if (row.payType == 1) {
        return u.foryear(cellValue);
      } else {
        return u.foryear(cellValue) + " " + u.fortime(cellValue);
      }
    },
    getdatetime(now, l = "-", m = ":") {
      now = parseInt(now);
      now = new Date(now);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      // let seconds = now.getSeconds()
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      return year + l + month + l + date;
    },
    selectGoodsSaleDetails(salesId) {
      let data = {
        id: salesId
      };
      selectGoodsSaleDetails(data).then(res => {
        this.formdata = JSON.parse(JSON.stringify(res.data));
        let a = [
          "待确认",
          "待收款",
          "已取消",
          "待发货",
          "已关闭",
          "已清",
          "采购方取消订单",
          "采购方关闭订单",
          "待收货"
        ]; //销售订单状态
        this.saleStatusArray = a[res.data.statusFlow];
        this.formdata.saleCode = res.data.saleCode;
        this.formdata.purchaseAmount = res.data.saleAmount;
        this.formdata.orderDate = this.getdatetime(res.data.orderDate);
        // console.log(this.formdata.goodsNum);
        this.tableData = res.data.goodsList;
        this.formdata.retreatData = true;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].goodsNum = this.tableData[i].purchaseNum;
          // this.tableData[i].unitName = this.tableData[i].goodsUnit;
        }
      });
    },
    getDataBy(goodsSaleId) {
      let data = {
        id: goodsSaleId
      };
      selectOrderGoodsPurchaseReturnDetail(data).then(res => {
        this.formdata = JSON.parse(JSON.stringify(res.data));
        let a = ["已生成", "未同意", "待发货", "待收货", "待退款", "已完成"]; //退货订单状态
        this.saleStatusArray = a[this.formdata.purchaseStatus];
        this.formdata.retreatData = false;
        this.formdata.saleAmount = this.formdata.returnAmount;
        this.tableData = res.data.goodsList;
        this.formdata.purchaseAmount = res.data.formdataTotal;
        this.formdata.orderDate = this.getdatetime(res.data.orderDate);
        this.formdata.saleCode = res.data.purchaseinCode;
      });
    },
    getDataById() {
      let postdata = {
        id: this.id
      };
      orderDetails(postdata).then(res => {
        this.formdata.paymentTypes = res.data.orderDetail.paymentType;
        let b = ["", "销售收款", "退货收款"];
        this.paymentStatusArray = b[res.data.orderDetail.paymentType];
        this.formdata.paymentTypes = res.data.orderDetail.paymentType;
        this.paidPrices = res.data.orderDetail.paidPrice;
        this.remainingPrices = res.data.orderDetail.remainingPrice;
        if (res.data.orderDetail.creditTime != undefined) {
          // console.log(res.data.orderDetail.creditTime);
          this.creditTimes = this.getdatetime(res.data.orderDetail.creditTime);
        }
        this.creditPrices = res.data.orderDetail.creditPrice;
        this.payList = res.data.payList;
        if (res.data.orderDetail.paymentType == 1) {
          this.selectGoodsSaleDetails(res.data.orderDetail.salesId);
        } else if (res.data.orderDetail.paymentType == 2) {
          this.getDataBy(res.data.orderDetail.purchaseId);
        }
      });
    },
    rechargeSure() {},
    // 分配权限
    setRole(key) {
      return u.selectTitle(this.power, key);
    },
    // 处理审核状态
    // 点击返回按钮
    goBack() {
      history.back();
    }
  }
};
</script>
<style scoped>
.th-right {
  margin-top: 30px;
}
.from_main {
  margin-top: 10px;
  margin-bottom: 30px;
}
.box-content {
  margin-top: 10px;
}
</style>
